<template>
    <div :loading="loading" class=" bg-white p-4 rounded">
        <el-form :model="form" label-width="160px">
            <el-tabs v-model="active" type="card" tab-position="top" @tab-click="">

                <el-form-item label="物流查询key">
                    <div>

                        <el-input v-model="form.ship" size="normal" class="px-4" placeholder="物流查询key">
                        </el-input>
                        <p class="text-gray-500 ">物流查询key</p>

                    </div>

                </el-form-item>

                <el-form-item>
                    <el-button :loading=loading type="primary" size="default" @click="submit">保存</el-button>

                </el-form-item>

            </el-tabs>


        </el-form>



    </div>
</template>
<script setup>
import { getSysconfig, setSysconfig } from '~/api/sysconfig.js'
import { reactive, ref } from 'vue'
import { toast } from '~/composables/util.js'
const active = ref('first')

const form = reactive({
    "ship":""
    
})
//获取数据并且刷新
const loading = ref(false)
function getData() {
    loading.value = true
    getSysconfig()
        .then(res => {
            for (const k in form) {
                // 把响应回来数据的指定key赋值给form的指定key值
                form[k] = res[k];
            }
            // 把字符串进行逗号分割编程数组
            form.password_encrypt = form.password_encrypt.split(",")
            console.log(res);
        })
        .finally(() => {
            loading.value = false
        })
}
getData()

const submit = () => {
    loading.value = true
    //把数组作为字符串传递参数使用join
    setSysconfig({
        ...form,
    }).then(res => {
        toast('修改成')
        getData()
    }).finally(() => {
        loading.value = false
    })
}


</script>